<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div id="app">
    <h1>{{ msg }}</h1>
    <!-- <h2>{{ abc }}</h2> -->

    <div v-bind:title="msg"></div>
    <div :title="msg"></div>

    <!-- 绑定事件： -->
    <button v-on:click="fn">按钮 1</button>
    <!-- 注意：如果想要在传递参数后，在想获取到事件对象，通过传递固定的参数：$event -->
    <button v-on:click="fn(999, $event)">按钮 2</button>
    <button @click="fn(999)">按钮 3</button>
    <!-- <div v-abc></div> -->

    <!-- key 是Vue特殊的一个属性，在内部通过key识别唯一的一个DOM元素，将来能够根据这个key实现DOM的高效更新 -->
    <p v-for="item in list" :key="item">{{item}}</p>
</div>

<script src="./vue.js"></script>
<script>
    // Vue 内部解析模板的简单过程说明：
    // 1 vue 通过 el指定的元素，找到Vue要编译的模板
    // 2 编译模板（将 vue能够识别的语法，比如：{{}} / v-for / v-model / v-on）
    //    <h1>{{ msg }}</h1>
    // 3 将编译后的内容，再放回到 el指定的元素中
    //    <h1>没时间了 抓紧上课</h1>

    var vm = new Vue({
        // 指定vue实例管理页面中的哪一部分内容
        el: '#app',
        // data中的数据使用的注意点：
        // 提前声明好所有需要在视图中使用的数据
        // 动态添加进来的数据不具有响应式效果
        data: {
            msg: '没时间了 抓紧上课',
            list: ['a', 'b', 'c']
        },
        methods: {
            fn: function (num, e) {
                // console.log('事件触发了', num, e);
                console.log(num, e);
            }
        }
    })
</script>
</body>

</html>